<template>
  <div class="list-wrap">
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="8" :xl="5" :xxl="4">
          <a-form-item label="审核状态">
            <a-input-group class="query-item" compact>
              <a-select style="width: 100%" v-model="selectStatus">
                <a-select-option value="6">全部</a-select-option>
                <a-select-option value="2">审核中</a-select-option>
                <a-select-option value="3">审核通过</a-select-option>
              </a-select>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="16" :xl="10" :xxl="8">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" v-model="defaultSearch">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">商户名称</a-select-option>
                <a-select-option value="2">店铺名称</a-select-option>
                <a-select-option value="3">店铺联系方式</a-select-option>
                <a-select-option value="4">推荐人姓名</a-select-option>
                <a-select-option value="5">推荐人手机号</a-select-option>
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="keyword"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="11" :xxl="10">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 30%" v-model="timeType">
                <a-select-option value="1">提交时间</a-select-option>
                <a-select-option value="2">审核时间</a-select-option>
              </a-select>
              <date style="width: 70%" :value="time" @change="dateChange"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="8" :xxl="6">
          <a-form-item label="提交操作人">
            <a-input-group class="query-item" compact>
              <a-input style="width: 100%" placeholder="请输入操作人" v-model="getAdmin"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="6" :xxl="6">
          <div class="top-btns">
            <a-button @click="searchList" type="primary">查询</a-button>
            <a-button @click="resetList">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="inviteData"
        rowKey="id"
        :loading="loading"
        :pagination="pagination"
        :scroll="scrollX"
      >
        <span slot="action" slot-scope="text, item" class="action-wrap">
          <a @click="() => goDetail(item)">查看详情</a>
        </span>
      </a-table>
      <!-- <a @click="() => goDetail()">查看详情</a> -->
      <pagination
        :total="total"
        @loadDataList="initPageList"
        ref="pageBand"
      />
    </div>
  </div>
</template>

<script>
import { verifySearch } from '../../store/providerApi'
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      selectStatus: '6', // 审核状态
      defaultSearch: '0', // 查询条件选择的select
      keyword: '', // 查询条件下的name
      timeType: '1', // 时间查询
      time: [], //时间
      startTime: 0,
      endTime: 0,
      getAdmin: '', // 提交操作人
      pagination: false, // 表格自带的分页器
      loading: false,
      scrollX: {},
      total: 0,
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      columns: [
        {
          dataIndex: 'index',
          title: '序号',
          fixed: 'left',
          width: 60
        },{
          dataIndex: 'merchant_id',
          title: '商户id',
        },{
          dataIndex: 'store_name',
          title: '执照名称',
        },{
          dataIndex: 'merchant_name',
          title: '商家简称',
        },{
          dataIndex: 'store_phone',
          title: '店铺联系方式',
        },{
          dataIndex: 'province',
          title: '省份',
        },{
          dataIndex: 'city',
          title: '城市',
        },{
          dataIndex: 'district',
          title: '区/县',
        },{
          dataIndex: 'partner_name',
          title: '推荐人姓名',
        },{
          dataIndex: 'partner_phone',
          title: '推荐人手机号',
        },{
          dataIndex: 'status',
          title: '审核状态',
          customRender(status) {
            if (status == 1) {
              return '审核中'
            } else if (status == 2) {
              return '审核通过'
            }
          }
        },{
          dataIndex: 'submit_at',
          title: '提交时间',
        },{
          dataIndex: 'processed_at',
          title: '审核时间',
        },{
          dataIndex: 'remark',
          title: '备注',
        },{
          dataIndex: 'user',
          title: '提交操作人',
        },{
          dataIndex: 'admin',
          title: '审核操作人',
        },{
          title: '操作',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      inviteData: []
    }
  },
  methods: {
    // 渲染列表
    initPageList (info) {
      this.loading = true
      verifySearch({
        verify_type: this.selectStatus,
        time_type: this.timeType,
        start_time: this.startTime,
        end_time: this.endTime,
        search_type: this.defaultSearch,
        name: this.keyword,
        sub_name: this.getAdmin,
        page: info.page,
        num: info.pageSize
      }).then(res => {
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.inviteData = array
        this.loading = false
        this.total = res.data.total_num
        if (array.length > 0) {
          this.scrollX = { x: 2000 }
        } else {
          this.scrollX = {}
        }
      })
    },
    // 查看详情
    goDetail(item){
      this.$router.push({
        path:'/menu/provider/InviteMerchantAuditDetail',
        query: {id: item.uuid}
      })
    },
    // 查询列表
    searchList () {
      this.$refs.pageBand.getData()
    },
    // 重置列表
    resetList () {
      this.selectStatus = '6',
      this.timeType = '1',
      this.startTime = 0,
      this.endTime = 0,
      this.time = [],
      this.defaultSearch = '0',
      this.keyword = '',
      this.getAdmin = '',
      this.$refs.pageBand.getData()
    },
    // 时间
    dateChange({ date, start_time, end_time }) {
      this.time = date
      this.startTime = start_time
      this.endTime = end_time
      console.log(date, start_time, end_time)
    }
  }
}
</script>

<style>

</style>
